<template>
  <div>
    <Row>
      <Form ref="searchForm" :model="tuiguangSearchForm" inline :label-width="70" class="search-form">
        <Form-item label="手机号" prop="mobile">
          <Input type="text" v-model="tuiguangSearchForm.mobile" placeholder="请输入手机号" clearable style="width: 200px" />
        </Form-item>
        <Form-item label="注册时间">
          <DatePicker v-model="selectDate" type="datetimerange" format="yyyy-MM-dd" clearable @on-change="selectDateRange" placeholder="选择起始时间" style="width: 300px"></DatePicker>
        </Form-item>
        <Button @click="getOrderData" type="primary" icon="ios-search" class="search-btn">搜索</Button>

        <Button class="search-btn" type="primary" @click="handleReset">重置</Button>
        <download-excel class="export-excel-wrapper" :data="orderData" :fields="fields" :fetch="exportOrder" name="推广天使会员-支出.xls">
          <Button type="info" class="export"> 导出 </Button>
        </download-excel>
        <!-- <Button
                @click="unbindHandle"
                type="primary"
                class="search-btn Unbind"
                >解绑会员</Button
              > -->
      </Form>
    </Row>
    <div style="min-height: 180px">
      <Table :loading="loading" border ref="selection" :columns="tuiguangColumns" :data="orderData" class="mt_10" @on-selection-change="selectionChange">
      </Table>
      <Row type="flex" justify="end" class="mt_10" style="margin-top: 10px">
        <Page :current="tuiguangSearchForm.pageNumber" :total="orderTotal" :page-size="tuiguangSearchForm.pageSize" @on-change="orderChangePage" @on-page-size-change="orderChangePageSize" :page-size-opts="[10, 20, 50, 100]" size="small" show-total show-elevator show-sizer></Page>
      </Row>
    </div>
  </div>
</template>

<script>
import region from "@/views/lili-components/region"
import * as API_Member from "@/api/member.js"
import ossManage from "@/views/sys/oss-manage/ossManage"
import liliMap from "@/views/my-components/map/index"
import * as API_Partner from "@/api/partner.js"
import * as RegExp from "@/libs/RegExp.js"
import * as API_Order from "@/api/order.js"
import JsonExcel from "vue-json-excel"

export default {
  name: "tianshi",
  components: {
    region,
    ossManage,
    "download-excel": JsonExcel,
    liliMap,
  },
  props: {
    memberId: {
      type: String,
    },
  },
  data () {
    return {
      fields: {
        姓名: "realName",
        身份证号: {
          field: "idCardNumber",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        会员昵称: {
          field: "nickName",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        手机号码: {
          field: "mobile",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        级别: "gradeName",
        区域: "locationName",
        推广人姓名: "nameExte",
        推广人手机号: {
          field: "mobileExte",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        推广会员数: {
          field: "quantity",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        注册时间: {
          field: "beginTime",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        到期时间: {
          field: "endTime",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        充值钱包余额: {
          field: "rechargeMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        推广钱包余额: {
          field: "promoteMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        充值现金总额: {
          field: "allRechargeMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
        焕贝总额: {
          field: "allMoney",
          callback: (value) => {
            return "&nbsp;" + value
          },
        },
      },
      id: "", //会员id
      loading: true, // 表单加载状态
      detailData: [], //会员信息头部端口费用数据
      selectDate: null, // 选择时间段
      tuiguangColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "姓名",
          key: "realName",
          width: "150",
          tooltip: true,
        },
        {
          title: "身份证号",
          key: "idCardNumber",
          width: "150",
          tooltip: true,
        },
        {
          title: "会员昵称",
          key: "nickName",
          width: "150",
          tooltip: true,
        },
        {
          title: "手机号码",
          key: "mobile",
          width: "150",
        },
        {
          title: "级别",
          key: "gradeName",
          width: "150",
        },

        {
          title: "区域",
          key: "locationName",
          width: "300",
          tooltip: true,
        },

        {
          title: "推广人姓名",
          key: "nameExte",
          width: "300",
          tooltip: true,
        },

        {
          title: "推广人手机号",
          key: "mobileExte",
          width: "300",
          tooltip: true,
        },
        {
          title: "推广员数",
          key: "quantity",
          width: "300",
          tooltip: true,
        },
        {
          title: "注册时间",
          key: "beginTime",
          width: "250",
        },
        {
          title: "到期时间",
          key: "endTime",
          width: "250",
        },

        {
          title: "充值钱包余额",
          key: "rechargeMoney",
          width: "150",
        },
        {
          title: "推广钱包余额",
          key: "promoteMoney",
          width: "150",
        },
        {
          title: "充值现金总额",
          key: "allRechargeMoney",
          width: "150",
        },
        {
          title: "焕贝总额",
          key: "allMoney",
          width: "150",
        },

        // {
        //   title: "状态",
        //   key: "partnerState",
        //   width: "100",
        //   render: (h, param) => {
        //     if (param.row.partnerState == 0) {
        //       return h(
        //         "Tag",
        //         {
        //           props: {
        //             color: "green",
        //           },
        //         },
        //         "启用"
        //       );
        //     }
        //     if (param.row.partnerState == 1) {
        //       return h(
        //         "Tag",
        //         {
        //           props: {
        //             color: "red",
        //           },
        //         },
        //         "禁用"
        //       );
        //     }
        //   },
        // },
      ],
      orderData: [], //订单数据
      orderTotal: 0, //订单总条数
      //TA的订单form
      tuiguangSearchForm: {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        roleType: "ANGEL_PARTNER",
        mobile: "",
        beginTime: "",
        endTime: "",
      },
      choseIds: [], //选中解绑的数据
    }
  },
  methods: {
    // 收入导出订单
    async exportOrder () {
      const params = JSON.parse(JSON.stringify(this.tuiguangSearchForm))
      params.pageNumber = 1
      params.pageSize = 999999999
      const result = await API_Partner.getMemberListData(params)
      if (result.code == 200) {
        if (result.result.records.length === 0) {
          this.$Message.warning("暂无可导出数据")
          return []
        } else {
          return result.result.records
        }
      } else {
        this.$Message.warning("导出数据失败，请重试")
      }
    },
    // 重置
    handleReset () {
      this.selectDate = ""
      this.tuiguangSearchForm = {
        pageNumber: 1, // 当前页数
        pageSize: 10, // 页面大小
        roleType: "ANGEL_PARTNER",
        mobile: "",
        beginTime: "",
        endTime: "",
      }
      this.getOrderData()
    },
    init () {
      //收入
      this.getOrderData()
    },
    // 解绑会员
    unbindHandle () {
      if (this.choseIds.length < 1) {
        this.$Message.warning("请选择要解绑的会员")
      } else {
        this.$Modal.confirm({
          title: "解绑会员",
          content: "<p>解除绑定关系的会员，将归属平台</p>",
          onOk: () => {
            API_Member.updateMemberStatus(this.choseIds).then((res) => {
              if (res.success) {
                this.$Message.success("解绑成功")
                this.getData()
              } else {
                // this.$Message.error(res.message);
              }
            })
          },
        })
      }
    },
    // 收入起止时间从新赋值
    selectDateRange (v) {
      if (v) {
        this.tuiguangSearchForm.beginTime = v[0]
        this.tuiguangSearchForm.endTime = v[1]
      }
    },
    getOrderData () {
      this.loading = true
      this.tuiguangSearchForm.memberId = this.memberId
      API_Partner.getMemberListData(this.tuiguangSearchForm).then((res) => {
        this.loading = false
        if (res.success) {
          this.orderData = res.result.records
          this.orderTotal = res.result.total
        }
      })
    },
    //收入
    orderChangePage (v) {
      this.tuiguangSearchForm.pageNumber = v
      this.getOrderData()
    },
    //收入
    orderChangePageSize (v) {
      this.tuiguangSearchForm.pageNumber = 1
      this.tuiguangSearchForm.pageSize = v
      this.getOrderData()
    },
    // 推广会员多选，筛选出对应的id
    selectionChange (val) {
      this.choseIds = val.map((item) => item.memberId)
    },
  },

  mounted () {
    this.init()
  },
};
</script>
<style lang="scss" scoped>
@import '../../user-partner-detail.scss';
.export-excel-wrapper {
  margin-left: 10px;
}
.totleQuota {
  margin-left: auto;
  display: flex;
  align-items: center;
  p {
    padding: 0 15px;
    box-sizing: border-box;

    span {
      color: #ff5c58;
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.detailTable {
  width: 50% !important;
}
.Unbind {
  background: #f56c1d;
}
/deep/.ivu-tabs-bar {
  border: none !important;
}
.storeBtn {
  // width:30px;
  display: inline;
  padding: 8px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  background: #f56c1d;
  color: #ffffff;
}
.walltMoneyNumBox {
  display: flex;
  align-items: center;
  p {
    margin-right: 20px;
  }
}
</style>
